<template>
  <div class="compoentBox">
    <Title :title="'路口事件'"/>
    
    <div class="ec-wrap">
      <!-- ECHART示例 -->
      <el-select v-model="curRoad" placeholder="请选择" @change="initData" class="selectBox">
        <el-option
          v-for="item in eventList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
          style="font-size: 12px;">
        </el-option>
      </el-select>
      <EcResize :option="ecOption" />
    </div>
    <div class="blockContainer">
      <div class="btnContainer">
        <div class="btn" v-for="item in tabs" :key="item.id"
          :class="{'activeBtn' : menuId === item.id}" @click="handleClick(item)">
          {{item.label}}
        </div>
      </div>
      <div class="tableContainer" v-if="menuId === 4">
        <!-- <div class="text">
          <div class="all">
            <div class="tableCell" v-for="(ele, index) in tableData" :key="index">
              <p>{{ ele.typeName }}</p><p>{{ ele.junctionName }}</p><p>{{ ele.time + '' }}</p>
            </div>
          </div>
        </div> -->
        <div class="text">
          <div class="all">
            <div class="congestionCard congestionCardBack">
                <div class="point pointheader"></div>
                <span>重大事件</span>
                <div class="progressClass">地点</div>
                <b>时间</b>
            </div>
            <div v-for="(item, index) in tableData" :key="index" class="congestionCard">
                <div class="point"><i><strong></strong></i></div>
                <span>{{ item.typeName }}</span>
                <div class="progressClass">{{item.junctionName}}</div>
                <!-- <el-progress :percentage="item.num / 10 * 100" color="rgba(84, 181, 255, 0.6)" :show-text="false" class="progressClass"></el-progress> -->
                <b>{{item.time}}</b>
            </div>
          </div>
        </div>
      </div>
      <div class="tableContainer" v-else >
        <div class="box">
          <div class="boxRight">
            <div class="itemBg" v-for="(item,index) in messagPieChart" :key="item.name">
              <div class="itemBgFlex">
                <div class="itemBgLeft">
                  <!-- <div>{{ item.icon }}</div> -->
                  <i :style="'background:' +  color[index]"></i>
                  <div>{{ item.name }}</div>
                </div>
                <div class="itemBgRight">
                  <div>{{ item.value }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="ec-wrapPie">
            <!-- ECHART示例 -->
            <EcResize :option="ecOptionPie" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, computed, onMounted } from 'vue';
import EcResize from '@sutpc/vue3-ec-resize';
import Title from '../title.vue'
// import { xiaoche } from '@/assets/images/imagesIn'
import { getJunctionEvent, getEventList } from '../../../../utils/apiComponent'

export default defineComponent({
  name: 'ComponentOne',
  components: {
    Title,
    EcResize
  },
  setup() {
    const data = reactive({
      curRoad: '1',
      eventList: [
        {id: '1', name: '车辆故障'},
        {id: '2', name: '人车事故'},
        {id: '3', name: '车车事故'},
        {id: '4', name: '设施相关'},
        {id: '5', name: '其他'},
        {id: '6', name: '车辆火灾'},
        {id: '7', name: '路面火灾'}
      ],
      messagLineChart: {
        value: [21,	23,	27,	28,	24,	25,	19,	28,	17,	25,	19,	27,	25,	26,	27,	28,	26,	26,	17,	25,	24,	26,	28,	27,	25,	27,	28,	28,	29,	23,],
        xAixs: ['1', '', '', '', '5', '', '', '', '', '10', '', '', '', '', '15', '', '', '', '', '20', '', '', '', '', '25', '', '', '', '', '30']
      },
      messagPieChart: [
        { value: 35, name: '希迪' },
        { value: 20, name: '星云' },
        { value: 25, name: '中信科智联' },
        { value: 25, name: '中信科智联' },
        { value: 25, name: '中信科智联' },
        { value: 25, name: '中信科智联' }
      ],
      color: ['rgba(94, 47, 171, 1)', 'rgba(50, 84, 221, 1)', 'rgba(81, 145, 66, 1)', 'rgba(229, 204, 72, 1)', 'rgba(28, 167, 204, 1)', 'rgba(214, 122, 36, 1)'],

      menuId: 4,
      tabs: [
        { label: '事件列表', id: 4, type: 'mec' },
        { label: '事件分析', id: 5, type: 'rsu' },
      ],
      tableData: [
        {
          junctionName: '嘉和路与吉庆道交叉口',
          typeName: 1,
          time: 5799364501,
          faultNum: 0,
          faultRate: 0.0
        },
        {
          junctionName: '枣林大道与晨曦路交叉口',
          typeName: 2,
          time: 5779286537,
          faultNum: 0,
          faultRate: 0.0
        },
        {
          junctionName: '知景道与枣林大道交叉口',
          typeName: 3,
          time: 5729373626,
          faultNum: 0,
          faultRate: 0.0
        },
        {
          junctionName: '博桦道与晨曦路交叉口',
          typeName: 4,
          time: 5708364527,
          faultNum: 0,
          faultRate: 0.0
        },
        {
          junctionName: '博桦道与晨曦路交叉口',
          typeName: 4,
          time: 5708364527,
          faultNum: 0,
          faultRate: 0.0
        },
        {
          junctionName: '博桦道与晨曦路交叉口',
          typeName: 4,
          time: 5708364527,
          faultNum: 0,
          faultRate: 0.0
        },
        {
          junctionName: '博桦道与晨曦路交叉口',
          typeName: 4,
          time: 5708364527,
          faultNum: 0,
          faultRate: 0.0
        }
      ],
      deviceUpDownData: {}
    })
    const refData = toRefs(data)
    const handleEntrance = () => {
      console.log('handleEntrance')
    }
    const ecOption = computed(() => {
      return {
        title: {
          text: '访问量(次)',
          show: false,
          left: '30px',
          top: '10px',
          textStyle: {
            color: '#d2d2d2',
            fontWeight: 'normal'
          }
        },
        color: ['rgba(84, 181, 255, 1)'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          formatter: function (params) {
            var res =
              "<div style='margin-bottom:5px;width:100%;padding: 0 12px;height:24px;line-height:24px;border-radius:3px; text-align: left'><p>" +
              params[0].name +
              " </p></div>";
            for (var i = 0; i < params.length; i++) {
              res += `<div style="color: #000;font-size: 14px; padding:0 12px;line-height: 24px">
                  <span style="display:inline-block;margin-right:5px;border-radius:2px;width:10px;height:10px;background-color:${[
                    params[i].color,
                  ]};"></span>
                  路口事件
                  ${params[i].data}个
                </div>`;
            }
            return res;
          },
        },
        legend: {
          show: false,
          orient: 'horizontal',
          selectedMode: false,
          right: 40,
          textStyle: {
            color: '#ccc',
            fontSize: '12'
          }
        },
        grid: {
          left: '0%',
          right: '6%',
          bottom: '0%',
          top: '6%',
          containLabel: true
        },
        axisLine: {
          lineStyle: {
            opacity: .3
          }
        },
        xAxis: [
          {
            type: 'category',
            // splitNumber : 6,
            boundaryGap: false,
            data: data.messagLineChart.xAixs,
            axisLabel: {
              color: '#c5c5c5',
              textStyle: {
                color: '#c5c5c5',
                fontSize: 12
              }
            }
          }],
        yAxis: [
          {
            type: 'value',
            show: true,
            // max: 60,
            splitNumber : 4,
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#d2d2d2',
                fontSize: 12
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(84, 181, 255, 1)',
                width: 0.2
              }
            }
          }
        ],
        series: [
          {
            name: '设备在线率',
            type: 'line',
            smooth: false,
            // lineStyle: {
            //   width: 0
            // },
            showSymbol: true,
            // areaStyle: {
            //   opacity: 0.7,
            //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //     offset: 0,
            //     color: 'rgba(5, 114, 233, .7)'
            //   }, {
            //     offset: 0.7,
            //     color: 'rgba(5, 114, 233, 0)'
            //   }])
            // },
            emphasis: {
              focus: 'series'
            },
            data: data.messagLineChart.value
          }
        ]
      }
    });
    const ecOptionPie = computed(() => {
      return {
        tooltip: {
          show: false,
          trigger: 'item'
        },
        color: data.color,
        grid: {
          left: 40,
          right: 0,
          containLabel: true,
        },
        legend: {
          show:false,
          top: 'center',
          right: '30%',
          // left: 0,
          orient: 'vertical',
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 6,
          align: 'left',
          textStyle: {
            fontSize: 10,
            color: '#ffffff'
          }
        },
        series: [
          {
            tooltip: {
              show: false
            },
            width: 260,
            height: 220,
            top: 'center',
            left: 0,
            name: 'Access From',
            type: 'pie',
            radius: ['30%', '66%'],
            center: ['30%', '52%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                formatter: '{d}' + '%',
                color: '#fff',
                fontSize: '12',
                fontWeight: 'bold',
                textBorderWidth: 0.1
              }
            },
            labelLine: {
              show: false
            },
            data: data.messagPieChart
          }]
      }
    });
    const handleClick = (ele) => {
      data.menuId = ele.id
      // initDeviceVendorType(ele.type)
      if (ele.id === 5) {
        // data.tableData = data.deviceUpDownData.upRoadMsg.slice(0, 8)
      } else if (ele.id === 4) {
        // data.tableData = data.deviceUpDownData.downRoadMsg.slice(0, 8)
      }
    }
    const initData = () => {
      console.log(data.curRoad)
      getJunctionEvent(data.curRoad).then((res) => {
        // console.log(res)
        const line = res.line
        data.messagLineChart.value = []
        data.messagLineChart.xAixs = []
        line.forEach(element => {
          data.messagLineChart.value.push(element.eventNum)
          data.messagLineChart.xAixs.push(element.time)
        });
        const pie = res.pie
        pie.forEach((element) => {
          element.value = element.num
        })
        data.messagPieChart = pie
        // data.dataList = res
      })
      getEventList().then((res) => {
        // console.log(res)
        data.tableData = res
      })
    }
    onMounted(() => {
      initData()
    })
    return {
      ...refData,
      ecOption,
      ecOptionPie,
      handleEntrance,
      handleClick,
      initData
    }
  }
})
</script>

<style lang="less" scoped>
@import '../../common.less';
// .box{
//   width: 662px;
//   height: 84px;
//   background-image: url('@{publicPath}static/images/componenttwo/img_moren.png');
//   background-repeat: no-repeat;
//   background-size: 100% 100%;
// }
.compoentBox{
  position: relative;
}
.ec-wrap {
  width: 100%;
  height: 220px;
  margin-bottom: 30px;
  margin-left: 20px;
}

.selectBox{
  position: absolute;
  top: 20px;
  right: 0;
  width: 166px;
  font-size: 18px;
  z-index: 1;
}
.tableContainer{
  margin: 18px auto;
}
.blockContainer{
  width: 100%;

}
.tableCell{
  display: flex;
  justify-content: space-around;
  align-items: center;
  color:#fff;
  height: 70px;
  /* border-bottom: 1px solid rgba(255,255,255, .15); */
  background: rgba(80,140,224,0.2);
  font-size: 14px;
}
.tableCell:nth-child(even) {
  // background:-webkit-linear-gradient(left, transparent, rgba(96, 124, 190, .2),transparent);
  background: rgba(14,39,88,0.35);
}
.tableCell span{
  /* width: 35%; */
  font-size: 16px;
  color: #90A5D6;
  text-align: center;
}
.tableCell p{
  /* width: 35%; */
  text-align: center;
}
.tableCell b{
  /* width: 8%; */
  text-align: center;
}
.tableCell strong{
  /* width: 20%; */
  text-align: center;
}

.all{
  // padding: 0 30px;
  /* background-color: rgba(0,0,0,.5); */
  /* border: 1px solid rgba(255,255,255, .15); */
  width: 100%;
  border-radius: 2px;;
  margin: 10px 0;
  margin-bottom: 10px;
}
.congestionCard{
  font-size: 14px;
}
.congestionCard.congestionCardBack{
  background: linear-gradient(0 , #1C3B68 0%, rgba(47,61,82,0.09) 100%);
}
.congestionCard{
  width: 100%;
  height: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 18px 0;
  background: rgba(255,255,255, 0.05);
  span{
    width: 20%;
    white-space: nowrap;
    overflow: hidden;
  }
  b{
    width: 15%;
    text-align: center;
    ;
  }
  .point{
    width: 10%;
    height: 100%;;
    display: flex;justify-content: center;
    align-items: center;
    i{
      display: block;;
      width: 20px;
      height:20px;
      border: 1px solid #40A3FF;
      display: flex;
      justify-content: center;
      align-items: center;
      strong{
        width: 7px;
        height:7px;
        background: #40A3FF;
      }
    }
  }
  .pointheader i{
    background: rgba(36, 87, 139, 1);
    border-radius: 50%;
    text-align: center;
    line-height: 20px;;
  }
  .progressClass{
    width: 40%
  }
}
.btnContainer{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 16px;
  width: 100%;
  // margin: 0 auto;
  margin-top: 40px;
  margin-bottom: 30px;
  .btn{
    border: 0;;
    background: linear-gradient( 90deg, #184D7E 0%, rgba(24,77,126,0) 100%);
  }
  .activeBtn{
    background: linear-gradient( 90deg, #187E7A 0%, rgba(24,77,126,0) 100%);
  }
}






.box{
  width: 100%;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
}

.ec-wrapPie {
  width: 42%;
  height: 280px;
  margin-bottom: 30px;
}
.boxRight{
  width: 58%;;
  margin-top: 16px;
}
.itemBgFlex{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  // height: 56px;
  padding: 5px 0;
}
.itemBg{
  width: 90%;
  // padding: 0 7px;
  // margin-right: 14px;;
  font-size: 16px;;
  // background-image: url('@{publicPath}static/images/bg_ganzhiduixiagn.png');
  // background-repeat: no-repeat;
  // background-size: 100% 100%;
  display: inline-block;
  // background: rgba(48,81,120,0.4);
  // border: 1px solid rgba(90,176,237,0.4);
  margin-bottom: 16px;
  margin-right: 6%;;
  background: rgba(61,73,85,0.4);

  // align-items: center;
  // justify-content: space-between;
}
.itemBg:nth-child(even){
  margin-right: 0;
}
.itemBgRight{
  display: flex;
  // flex-direction: column;
  // height: 18px;
  justify-content: center;
  align-items: flex-start;
  color: rgba(203,233,255,0.5);
}
.itemBgRight div:nth-child(1){
  font-size: 18px;
  margin-right: 10px;
}
.itemBgRight div:nth-child(2){
  font-size: 18px;
  margin-right: 10px;
}
.itemBgLeft{
  display: flex;
  // height: 18px;
  justify-content: flex-start;
  align-items: center;

}
</style>